﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-select v-if="userType===0" v-model="filterUserType" v-on:change="filterUserTypeChange" placeholder="用户类型">
                    <el-option :key="0" label="所有" :value="null">
                    </el-option>
                    <el-option :key="1" label="平台用户" :value="0">
                    </el-option>
                    <el-option :key="2" label="机构用户" :value="1">
                    </el-option>
                </el-select>
                <el-select v-if="userType===0" v-model="filterInsId" placeholder="请选择机构" v-on:clear="clearFilterInsId" clearable v-bind:disabled="filterUserType===0||filterUserType===null">
                    <el-option v-for="item in instructions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="filterName" placeholder="用户名" style="width:300px;" clearable></el-input>
                <el-button type="primary" v-on:click="loadTableData">搜索</el-button>
                <el-button type="primary" v-on:click="add()">添加管理员</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="tableData" style="width:100%">
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="账号" width="120" property="account">

                </el-table-column>
                <el-table-column label="姓名" width="100" property="name">

                </el-table-column>
                <el-table-column label="电话" width="120" property="phone">

                </el-table-column>
                <el-table-column label="所属机构" width="100" property="instruction">

                </el-table-column>
                <el-table-column label="角色" width="300" property="roleText">
                   
                </el-table-column>
                <el-table-column label="账号类型" width="100" property="accountType">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type===0" style="color:red">平台</span>
                        <span v-else style="color:#909399">机构</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180" property="createTime">
                    <!--注意此处 scope-slot的使用方法-->
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-on:click="deleteUser(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-dialog title="添加账户" :visible.sync="addDialogVisible" width="600px" v-on:close="resetForm" :close-on-click-modal="false">
        <el-form :model="account" :label-width="formLabelWidth" ref="ruleForm"  :rules="rules">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="类型">
                            <el-select v-model="account.type" v-on:change="dialogUserTypeChange" placeholder="账号类型" :disabled="account.typeDisabled">
                                <el-option :key="1" label="平台用户" :value="0">
                                </el-option>
                                <el-option :key="2" label="机构用户" :value="1">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-show=" account.type===1" label="所属机构" >
                        <el-select v-model="account.insId" placeholder="选择机构" v-on:change="dialogInsChange" :disabled="account.insDisabled">
                            <el-option v-for="item in instructions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="account.account" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="状态">
                            <el-radio-group v-model="account.flag">
                                <el-radio :label="true">正常</el-radio>
                                <el-radio :label="false">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="account.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12" v-show="!account.id">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="密码" prop="pwd">
                            <el-input v-model="account.pwd" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="account.phone" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="角色" :label-width="formLabelWidth">
                            <el-select v-model="account.role" multiple placeholder="选择角色" style="width:100%">
                                <el-option v-for="item in rolesOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="resetForm">取 消</el-button>
            <el-button type="primary" v-on:click="submit">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            insId: null,
            userType: null, // 当前用户类型
            filterUserType: null,
            filterInsId: null,
            filterName: null,
            instructions: [], // 机构集合
            rolesOptions:[],
            addDialogVisible: false,
            dialogActionType:0,
            tableData: [],
            formLabelWidth: '80px',
            account: {
                id:null,
                name: null,
                role: [],
                account: null,
                pwd: null,
                flag: true,
                insId: null,
                type: null,
                phone:null,
                typeDisabled:false,
                insDisabled:false
            },
            roleOptions: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            // 添加对话框控制
            dialogTitle: '',
            typeDisabled: false,
            rules: { 
                account:[
                    {required:true,message:'请输入账号',trigger:'blur'}
                ],
                name:[
                    {required:true,message:'请输入姓名',trigger:'blur'}
                ],
                pwd:[
                    {required:true,message:'请输入密码',trigger:'blur'}
                ],
                phone:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 用户过滤改变
            filterUserTypeChange(val) {
                let that = this;
                if (val === 0) {
                    that.filterInsId = null;
                }
            },
            dialogUserTypeChange(val) { 
                let that = this;
                // 清空选中角色
                that.account.role = [];
                // 添加机构用户
                if (val === 0) {
                    that.getRoleOptions(val, null);
                }
            },
            dialogInsChange(val) {
                let that = this;
                that.account.role = []; // 清空选中角色
                that.getRoleOptions(that.account.type,val)
            },
            getInsOptions() { 
                let that = this;
                axios.get(`/api/account/get-ins-options`)
                    .then((res) => {
                        debugger;
                        if (res.data.code === 0) {
                            that.instructions = res.data.data;
                        }
                    })
            },
            // 角色选项
            getRoleOptions() {
                let that = this;
                axios.get(`/api/account/get-role-options?roleType=${that.account.type}&insId=${that.account.insId}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.rolesOptions = res.data.data;
                        }
                    })
            },
            // 创建用户
            add() {
                let that = this;
                that.dialogActionType = 0; // 添加操作
                that.account.id = null;
                that.account.name = null;
                that.account.type = that.userType;
                if (that.userType === 1) {
                    that.account.insDisabled = true;
                    that.account.typeDisabled = true;
                    that.account.insId = that.insId
                }
                else {
                    that.account.insDisabled = false;
                    that.account.typeDisabled = false;
                }
                that.account.role = [];
                that.account.account = null;
                that.account.pwd = null;
                that.account.flag = true;
               
                that.account.phone = null;
                that.addDialogVisible = true;
                that.getRoleOptions();
                that.getInsOptions(that.userType, that.insId);
            },
            edit(index,row) {
                let that =this;
                that.dialogActionType = 1; // 修改操作
                that.account.insDisabled = true;
                that.account.typeDisabled = true;
                that.account.id = row.id;
                that.account.name = row.name;
                that.account.pwd = null;
                that.account.type = row.type;
                that.account.account = row.account;
                that.account.role = row.role;
                that.account.phone = row.phone;
                that.account.flag = row.flag;
                if (row.instruction === 999999) {
                    that.account.insId = null;
                }
                else { 
                    that.account.insId = row.insId;
                }
                that.getRoleOptions();
                that.addDialogVisible = true;
                that.getInsOptions(that.userType, that.insId);
            },
            submit() { 
                let that = this;
                if (that.dialogActionType === 0) {
                    that.addSubmit();
                }
                else { 
                    that.editSubmit();
                }
            },
            // 提交新建账户
            addSubmit() {
                let that = this;
                that.account;
                axios.post("/api/account/account-submit", that.account)
                    .then((res) => {
                        debugger;
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            that.resetForm();
                            that.loadTableData();
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
            },
            editSubmit() { 
                let that = this;
                axios.post("/api/account/edit-submit", that.account)
                    .then((res) => {
                        debugger;
                        if (res.data.code === 0) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            that.resetForm();
                            that.loadTableData();
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
            },
            // 加载表格数据
            loadTableData() {
                // 先根据userType 、InsId
                // 如果 userType:0  ,根据 filterUserType、filterInsId、filterName  搜索
                // 如果 userType:1  ，根据 filterName、insId 搜索
                let that = this;
                let params = {
                    userType:that.userType,
                    insId:that.insId,
                    filterUserType:that.filterUserType,
                    filterInsId:that.filterInsId,
                    filterName:that.filterName,
                }
                axios.post(`/api/account/get-account-list`, params)
                    .then((res) => {
                        if (res.data.code === 0) {
                            if (res.data.data.length > 0) {
                                that.tableData = res.data.data.map(item=>item.result);
                                that.tableData.forEach(item => { 
                                    item.roleText = item.role.join('、');
                                });
                            }
                            else {
                                that.tableData = [];
                            }
                        }
                        else {
                            that.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
            },
            resetForm() {
                let that = this;
                that.$refs['ruleForm'].resetFields();
                that.addDialogVisible = false;
            },
            clearFilterInsId() { 
                let that = this;
                that.filterInsId = null;
            },
            deleteUser(index,row){
                let that = this;
                this.$confirm('用户将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/account/delete-user?id=${row.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                that.loadTableData();
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            let that = this;
            that.userType =@ViewBag.UserType
            if (that.userType === 1) {
                that.insId =@ViewBag.InsId
            }
            else{ 
                that.getInsOptions();
            }
            that.loadTableData();
        },
        mounted() {

        }
    });
</script>
<style>
    .line-gray {
        background-color: #eee !important;
        color: #C0C4CC !important;
        border-color: #C0C4CC !important;
        border: 0;
        height: 1px;
    }
</style>